import React from 'react';
import ReactDOM from 'react-dom';

// import React from './lib/react';
// import ReactDOM from './lib/react-dom';


/**
 * 高阶组件,可以实现属性的代理,给组件添加额外属性,
 * 实现特定逻辑等,复用
 * 一般来说,子组件继承父组件叫正向继承
 * 高阶组件 "反向继承", 拦截生命周期
 * // 扩展第三方组件的功能
 */
const wrapper = (OldComponent) => {
  return class extends OldComponent {
    state = {
      count: 0
    }
    handleClick = () => {
      this.setState({
        count: this.state.count + 1
      })
    }
    componentWillMount() {
      console.log('wrapper componentWillMount')
      super.componentWillMount();
    }
    componentDidMount () {
      console.log('wrapper componentDidMount');
      super.componentDidMount();
    }
    render() {
      console.log('wrapper render');
      const renderElement = super.render();
      const newProps = {
        ...renderElement.props,
        onClick: this.handleClick
      }

      return React.cloneElement(renderElement, newProps, this.state.count);
    }
  }
}

class Button extends React.Component {
  state = {
    name: 'Tom'
  }
  componentWillMount() {
    console.log('Button componentWillMount')
  }
  componentDidMount () {
    console.log('Button componentDidMount');
  }
  render() {
    return (
      <button name={this.state.name}>{this.props.title}</button>
    )
  }
}

const WrappedButton = wrapper(Button)
ReactDOM.render(
  <WrappedButton title={'点我'} />,
  document.getElementById('root')
);

// 注意如果要使用老的把 jsx 编译成 React.createElement(), 必须在启动项中设置 cross-env DISABLE_NEW_JSX_TRANSFORM=true
// 如： "start": "cross-env DISABLE_NEW_JSX_TRANSFORM=true react-scripts start",